<template>
	<el-row class='mb28'  >
		<el-row class='text-left mt12  mb10'>{{form.prjName}}
			<el-button v-if='form.status == 1  ||  form.status == 10' type="info" round size='mini' class='ml10'>{{form.status | project_status}}</el-button>
			<el-button v-if='form.status == 2  ||  form.status == 5  ||   form.status == 8  ||  form.status == 11' type="warning" round size='mini'>{{form.status | project_status}}</el-button>
			<el-button v-if='form.status == 3  || form.status == 6  ||  form.status == 9  ||  form.status == 12' type="danger" round size='mini'>{{form.status | project_status}}</el-button>
			<el-button v-if='form.status == 4  ||  form.status == 7  ||  form.status == 13' type="success" round size='mini'>{{form.status | project_status}}</el-button>
  		</el-row>

		<el-col  :md='11' :lg='10' align='left'>
			<el-tabs v-model="fir_activeName" >
    			<el-tab-pane label="项目信息" name="first"></el-tab-pane>
    		</el-tabs>
    		<el-col  :xs='24' :sm='{span:16,offset:2}' :md='{span:14,offset:2}' :lg='{span:20,offset:0}'>
				<el-form ref="form" :model="form" label-width="170px" size='small' class='form_auto'>
					<el-form-item  label="项目类型："     >  {{form.prjType | project_type}}  </el-form-item>
					<el-form-item  label="项目规模："     >  {{form.prjSize}}（万元）  </el-form-item>
					<el-form-item  label="融资主体性质：" >  {{form.financingSubjectNature | project_rongzi}}  </el-form-item>
					<el-form-item  label="所属集团："     >  {{form.affiliatedGroup}}  </el-form-item>
					<el-form-item  label="项目负责人："   >  {{form.principalName}}  </el-form-item>
					<el-form-item  label="项目对接人："   >  {{form.dockerName}}	  </el-form-item>
					<el-form-item  label="项目存续周期不超过："  class='inline-block '>
					    <span  v-if='form.subsistingCycle!=null'>{{form.subsistingCycle}}个月</span>
					    <span  v-else>--</span>
					</el-form-item>
					<el-form-item  label="募集对象："     >  {{form.recruitmentObject}}	</el-form-item>
					<el-form-item  label="募集金额：" >
							<span  v-if='form.collectionAmt!=null'>  {{form.collectionAmt}}（万元）</span>
					        <span  v-else>--</span>
					</el-form-item>
					<el-form-item  label="募集路径："     >  {{form.collectionAmtType | pro_route}}  </el-form-item>
					<el-form-item  label="募集速度："     >
							<span  v-if='form.collectionVelocity!=""'>  {{form.collectionVelocity}} 销售额/月</span>
					    	<span  v-else>--</span>
					</el-form-item>
					<el-form-item  label="交易所拟收费标准：" >
							<span  v-if='form.chargesStandard!=""'>{{form.chargesStandard}} % {{ form.chargesMethod | pro_chargesMethod}}</span>
					    	<span  v-else>--</span>
					</el-form-item>
					<el-form-item  label="收费方式："     >
					        {{form.chargingMethod | project_fare_type}} 
					        <span  v-if='form.chargingMethod == 4'>{{form.chargingValue}}</span>
					</el-form-item>
					<el-form-item  label="期望挂牌完成日期：" >  {{form.expCompleteDate | formatDates}}  </el-form-item>
					<el-form-item  label='其他备注信息：' >  {{form.comments}}  </el-form-item>
				</el-form>
			</el-col>
		</el-col>	
		<el-col :md='{span:12,offset:1}' :lg='{span:13,offset:1}' align='left' >
			<el-row>
				<el-tabs v-model="fir_activeName" >
	    			<el-tab-pane label="参与企业" name="first"></el-tab-pane>
	    		</el-tabs>
	            <el-table
	                     :data="company_list"
	                     >              
					<el-table-column  prop="entRole"       label="项目角色"   align='center'>
							<template  slot-scope='list'>
									{{list.row.entRole  |  pro_comRole}}
							</template>
					</el-table-column>
					<el-table-column  prop='entName'        label="企业名称"  align='center'></el-table-column>
					<el-table-column  prop='chargingMethod' label="收费方式"  align='center'>
							<template  slot-scope='list'>
									{{list.row.chargingMethod  |  pro_comCharge}}
							</template>
					</el-table-column>
					<el-table-column  prop='serviceRate'    label="服务费率"  align='center'>
							<template  slot-scope='list'>
								<span  v-if='list.row.serviceRate!=null'>{{list.row.serviceRate}}%</span>
								<span  v-else>--</span>
							</template>
					</el-table-column>
					<el-table-column   label="账号信息" align='center'>
							<template  slot-scope='list'>
									<li  v-if='list.row.bizEntBankList'  v-for='(item,index)  in  list.row.bizEntBankList'  :key='index'>
										<el-row>{{item.bankAccount}}</el-row>
					  				<span>{{item.accountName}}{{item.subbranchName}}</span>
					  			</li>
					  			
							</template>
					</el-table-column>      
	            </el-table>
	        </el-row>
	        <el-row class='mt28'>
	        		<el-tabs v-model="fir_activeName" >
		    				<el-tab-pane label="项目材料" name="first"></el-tab-pane>
		    		</el-tabs>	
		    		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					    <el-tab-pane label="项目文件" name="first"></el-tab-pane>
					    <el-tab-pane label="立项材料" name="second"></el-tab-pane>
					    <el-tab-pane label="过会材料" name="third"></el-tab-pane>
					 </el-tabs>
                    <el-table
                        :data="current_file"  :cell-class-name='hover'   @cell-click='checkUser'
                        header-row-class-name='bankheader' 
                        >
						<el-table-column   label="文件名称"  align='center'   >
							<template v-slot="list">
						        <span  v-if='list.row.fileName'>{{list.row.fileName}}</span>
						        <span  v-if='list.row.name'>{{list.row.name}}</span>
						    </template>
						</el-table-column>

						<el-table-column   label="操作" align='center'>
						    <template v-slot="list">
						        <el-button  type="primary" size="mini" round @click="downloadFile(list.row.fileCode)">下载</el-button>
						    </template>
						</el-table-column>
                    </el-table>
	        </el-row>
            <el-row class='mt28'>
            		<el-tabs v-model="fir_activeName" >
		    				<el-tab-pane label="相关人员" name="first"></el-tab-pane>
		    		</el-tabs>	
		    		<el-row  v-if='form.userList != undefined'>
						<dl v-if='form.userList.length'  v-for="(tag,index) in form.userList" :key='index' class='fl ft14 mr30' align='center'>
							<dt class='mb10'>
								<img src='static/img/user/icon-default-user.png' title='用户头像' class='default-user-img'>			
							</dt>
							<dd >{{tag.name}}</dd>
							<dd >{{tag.roleName}}</dd>
						</dl>
						<span v-if='form.userList.length == 0' class='ft14'>暂无</span>
					</el-row>
            </el-row>
		</el-col>
	</el-row>
</template>

<script type="text/javascript">
/*interface*/
import { detailProject }  from  '@/api/professional_work/project/index'
import { getExaHistory }  from  '@/api/examine/index'
import { getpdfcode }  from '@/api/common/file'/*pdf文件预览*/

export default {
	name: 'project_datail',
	data(){
		return {
			//static
			fir_activeName:'first',
			activeName:'first',
			//active
			form:{
				prjName:'',
				prjType:'',
				prjSize:'',
				prdDuration:'',
			},
			//参与企业list
			company_list:[],
			/*当前显示的表单文件*/
			current_file:[],
			/*记录下当前项目文件*/
			project_file:[],
			//立项和过会历史
			pro_setup_data:{},
			pro_LiftComunty_data:{},

		}
	},
	created(){
		let code = this.$route.query.code
		this.pageInit(code)
	},
	methods:{
		pageInit(code){
      	   let that =this
            Promise.all([detailProject(code),getExaHistory(code)]).then((result) => {
            	this.form = result[0].data.data
            	this.project_file = this.form.projectFileList/*记录下当前项目文件*/
            	this.current_file = this.project_file/*默认显示项目文件*/
				//参与企业列表
				this.company_list = this.form.projectEntList

				this.pro_setup_data = result[1].data.data.projectReqVO
                this.pro_LiftComunty_data = result[1].data.data.projectMeetingReqVO
                
	        }).catch((error) => {
	            console.log(error)      
	        })
		},

		hover({row, column, rowIndex, columnIndex}){
	    //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置
	        if(columnIndex == 0 ){
	            return 'activeCol  spaceNowrap'
	        }
	    },
	    //点击表格第一列  查看详情
		checkUser(row, column, cell, event){
			console.log(row,column)
			
			if(column.label == '文件名称' ){
				/*预览文件*/
				// let n = row.fileName.search(/doc/ig);
				// let n1 = row.fileName.search(/docx/ig);

				let pdfStr = row.fileName ? row.fileName.search(/pdf/ig) : row.name.search(/pdf/ig)
				if(pdfStr !=-1){
					/*pdf文档*/
					window.open('download_file?fileCode='+row.fileCode+'&token='+sessionStorage.getItem('tokenId')+'&isRead=1')
				}
				else {
					//doc文档
					getpdfcode(row.fileCode)
				}
			}
		},
		/*tab切换显示文件列表*/
		handleClick(tab, event) {
            if(tab.name == 'first'){
                this.current_file = this.project_file
            }
            if(tab.name == 'second' ){
                this.current_file = this.pro_setup_data == null ? [] : this.pro_setup_data.reqFileList
            }
            if(tab.name == 'third'){

                this.current_file = this.pro_LiftComunty_data == null ? [] :this.pro_LiftComunty_data.reqFileList
            }
        },
     },
     components:{
     
     }, 
}
</script>

<style  scoped>
.form_auto{padding-right: 60px;}
.inline-input{width: 40%;}
/*用户头像*/
.default-user-img{background: #eee;border-radius: 50%;}
@media screen and (max-width: 1418px) {
    .form_auto{padding-right: 0px;}
    .el-input--suffix .el-input__inner{padding-right: 18px;}
}

@media screen and (max-width: 1124px) {
    .inline-input{width: 80%;}
}

@media screen and (max-width: 1105px) {
    .pro_line{margin-left:120px;}
}
</style>